<template>
  <div class="feedback-form">
    <el-form ref="form" :model="form" label-width="120px">
      <h1>满意度评分</h1>
      <div class="satisfaction-ratings">
        <div v-for="(item, index) in satisfactionItems" :key="index" class="satisfaction-item">
          <label>{{ item.label }}:</label>
          <el-rate v-model="form.satisfaction[index]" :max="5" allow-half show-score></el-rate>
        </div>
      </div>

      <el-form-item label="意见和建议:" prop="comment" size="medium">
        <el-input v-model="form.comment" type="textarea" :rows="5"></el-input>
      </el-form-item>
      <el-form label-width="100px">
        <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
          <el-button type="primary" @click="handleUpdate()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-form>
  </div>
</template>

<script>
import { updateSelectUser } from "@/api/lxy/selectUser";

export default {
  data() {
    return {
      form: {
        satisfaction: [0, 0, 0, 0, 0], // 存放满意度评分的数组
        comment: "",
        id: undefined,
        projectId: undefined,
        userId: undefined,
        timeId: undefined
      },
      satisfactionItems: [
        { label: "总体满意度" },
        { label: "景点和景观满意度" },
        { label: "价格和价值满意度" },
        { label: "安全性满意度" },
        { label: "活动和娱乐满意度" },
      ],
    };
  },
  methods: {
    handleUpdate(){
     this.$refs["form"].validate(valid => {
       if (valid) {
         this.buttonLoading = true;
         this.form.id = this.$route.query.selectUserId;
         this.form.projectId = this.$route.query.projectId;
         this.form.userId = this.$route.query.userid;
         this.form.timeId = this.$route.query.timeId;
         // 假设你有一个用于提交修改的方法 updateItem，它接受 itemId 和修改后的数据作为参数
         updateSelectUser(this.form).then(response => {
           this.$modal.msgSuccess("修改成功");
           this.open = false;
           this.getList(); // 更新数据列表
         }).finally(() => {
           this.buttonLoading = false;
         });
       }
     });
   },
    /**提交按钮操作 */
  },

};
</script>

<style scoped>
.feedback-form {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}

.satisfaction-ratings {
  margin-top: 20px;
}

.satisfaction-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>
